<template>
  <div class="flex h-full">
    <a-card class="mr-2" :body-style="{ display: 'flex', flexDirection: 'column', height: '100%', padding: '12px 8px' }">
      <List class="flex-1 overflow-auto" :row-data="{ status: 0 }" @select="onSelect($event)" />
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <div class="flex flex-1 overflow-hidden">
        <a-card class="flex-1 overflow-auto" :body-style="{ padding: '8px', overflow: 'hidden' }">
          <div class="mb-2">
            <div class="flex justify-center items-center">
              <BaseTitle title="分组成员" class="!mb-0" />
            </div>
            <div class="flex justify-between my-2">
              <a-input v-model:value="formState.pyjm" class="w-[350px]" placeholder="员工编号/员工姓名/助记码" />
              <div>
                <a-button class="mr-2" @click="onReset">重置</a-button>
                <a-button type="primary" @click="getData">检索</a-button>
              </div>
            </div>
          </div>
          <BaseTable
            :data-source="dataSource"
            column-code="000241"
            :loading="loading"
            max-fill
            :extra-height="64"
            :row-class-name="(record) => (record.isNew ? 'table-row-new' : '')"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'status'">
                <a-tag v-if="record.status === '0'" color="blue">有效</a-tag>
                <a-tag v-if="record.status === '1'" color="red">封存</a-tag>
              </template>
              <template v-if="column.dataIndex === 'empName'">
                <EditCell title="员工姓名">
                  <SelectTable v-model:value="record.empName" type="员工" placeholder="请输入" @select="onSelectNurse($event, record)" />
                </EditCell>
              </template>

              <template v-if="column.dataIndex === 'action'">
                <BaseButton confirm-text="确定移除？" danger size="small" type="text" @click="onClickDelete(record)">移除</BaseButton>
              </template>
            </template>
            <template #footer>
              <div class="text-center sticky bottom-0">
                <a-button class="mr-2" type="primary" ghost @click="addRow()"> 新增一行 </a-button>
                <a-button type="primary" :disabled="dataSource.length === 0" @click="saveNewRows()"> 保存 </a-button>
              </div>
            </template>
          </BaseTable>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import BaseTable from '@/components/BaseTable'
import { post } from '@/utils/request'
import List from './components/List'

const loading = ref(false)
const selectRwo = ref({})
const formState = ref({
  active: 1
})
const dataSource = ref([])

const onSelect = (row = {}) => {
  selectRwo.value = row
  if (row?.id) {
    getData()
  } else {
    loading.value = true
    dataSource.value = []
    loading.value = false
  }
}

const onReset = () => {
  formState.value.pyjm = ''
  getData()
}

const getData = async () => {
  formState.value = { ...formState.value, groupType: selectRwo.value.id }
  loading.value = true
  const { data, code, msg } = await post('/operation/opex/getEmpGroupMemberEntityList', {
    groupId: selectRwo.value?.id,
    pyjm: formState.value.pyjm
  })
  if (code !== 0) return message.error(msg)
  dataSource.value = data
  loading.value = false
}

//添加行
const addRow = async () => {
  const key = `row-${dataSource.value.length}`
  const addRow = { key, isNew: true }
  dataSource.value.push(addRow)
}

const onSelectNurse = (medicine, row) => {
  row.empName = medicine?.empName
  row.sex = medicine?.sex
  row.age = medicine?.age
  row.phone = medicine?.phone
  row.empId = medicine?.empId
  row.deptName = medicine?.bmmc
  row.ksmc = medicine?.ksmc
  row.categoryName = medicine?.emplb
  row.deptName = medicine?.deptName
  editRow(row)
}
const editRow = (row) => !row.isNew && fetchSave(row)
const fetchSave = async (row) => {
  const { code, msg } = await post('/operation/opex/doEmpGroupMembe', [{ ...row, groupId: formState.value.groupType }])
  if (code !== 0) return message.error(msg || '操作失败')
  message.destroy()
  message.success(row.isNew ? '新增成功' : '修改成功')
  getData()
}

const saveNewRows = async () => {
  const newRow = dataSource.value.filter((item) => item.isNew)
  newRow.forEach((item) => {
    if (item.empName) {
      fetchSave(item)
    } else {
      message.destroy()
      message.error('请填写完整信息')
    }
  })
}

const onClickDelete = async (row) => {
  const { code, msg } = await post('/operation/opex/doDelEmpGroupMembe', { id: row.id })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  getData()
}
</script>
<style lang="less" scoped></style>
